import { t } from 'i18next'
import React, { FC } from 'react'
import { IconHelper } from '../../style'
import { ITab, IChangeTab } from '../../interface'
import { Wrap } from './style'
import { useMsgStore } from '../../store'
interface IHelperTopProps {
	onClickTopTab: IChangeTab
	notShow?: ITab[]
}
export const HelperTop: FC<IHelperTopProps> = ({ notShow = [], onClickTopTab, children }) => {
	const tabData = useMsgStore((state) => state.tabData)
	const tab = useMsgStore((state) => state.tab)
	const tabs = tabData.filter((x) => !notShow.includes(x.name))
	return (
		<Wrap>
			<div className="top-tips">
				<IconHelper className="top-tips-helper" />
				<div className="top-tips-text">：{children}</div>
			</div>
			<div className="top-nav">
				{t('继续为您')}
				{tabs.map((x) => (
					<span key={x.name} className={tab === x.name ? 'active' : ''} onClick={() => onClickTopTab(x.name)}>
						{x.label}
					</span>
				))}
			</div>
		</Wrap>
	)
}
